<template>
    <div class="ruoyi-chat-container">

        <!-- 顶部添加清除按钮 -->
        <div class="ruoyi-chat-header">
            <el-button type="text" @click="clearHistory" style="color: #909399; padding: 0;">
                清除历史记录
            </el-button>
        </div>

        <!-- 欢迎消息 -->
        <div class="ruoyi-system-message">
            欢迎使用智能助手！请随时提出您的需求或疑问~
        </div>

        <!-- 对话历史 -->
        <div v-for="(item, index) in contentArr" :key="index" class="ruoyi-message-group">
            <!-- 用户消息（右对齐，若依主色调） -->
            <div class="ruoyi-user-message">
                <div class="ruoyi-user-content">
                    <span>{{ item.inputtext }}</span>
                </div>
                <!-- 删掉用户这边的复制按钮 -->
            </div>

            <!-- AI消息（左对齐，适配框架浅灰风格） -->
            <div class="ruoyi-ai-message">
                <div class="ruoyi-ai-avatar">A</div>
                <div class="ruoyi-ai-content">
                    <template v-if="item.isStreaming">
                        {{ item.restext }}
                        <span class="ruoyi-loading-dot">●</span>
                        <span class="ruoyi-loading-dot">●</span>
                        <span class="ruoyi-loading-dot">●</span>
                    </template>
                    <template v-else>{{ item.restext }}</template>
                </div>
                <div class="ruoyi-ai-actions">
                    <!-- 删掉AI这边的复制按钮 -->
                    <el-tooltip effect="dark" content="再试一次" placement="top">
                        <div class="ruoyi-retry-btn" @click="retry(index)">
                            <svg-icon icon-class="refresh" />
                        </div>
                    </el-tooltip>
                </div>
            </div>
        </div>

        <!-- 输入区域（适配若依按钮风格） -->
        <div class="ruoyi-input-area">
            <textarea v-model="prompt" placeholder="请输入内容..." @keydown.enter.prevent="send"
                :disabled="isSend"></textarea>
            <el-button type="primary" :disabled="!prompt.trim() || isSend" :loading="isSend" icon="el-icon-send"
                @click="send">
                发送
            </el-button>
        </div>
    </div>
</template>

<script>
import { customStream } from '@/api/ai/aiTalk';
import Cookies from 'js-cookie';

export default {
    data() {
        return {
            prompt: "",
            contentArr: [], // 存储 { inputtext, restext, isStreaming }
            isSend: false, // 发送状态
            abortController: null,

            // 定义一个 localStorage 的键名（唯一标识当前页面的聊天记录）
            storageKey: 'ai_chat_history'

        };
    },

    created() {
        // 页面初始化时，从 localStorage 读取历史记录
        this.loadHistory();
    },
    watch: {
        // 监听 contentArr 变化，自动保存到 localStorage
        contentArr: {
            deep: true, // 深度监听（因为是对象数组）
            handler() {
                this.saveHistory();
            }
        }
    },

    methods: {

        // 从 localStorage 加载历史记录
        loadHistory() {
            const history = localStorage.getItem(this.storageKey);
            if (history) {
                try {
                    this.contentArr = JSON.parse(history);
                } catch (e) {
                    console.error('加载聊天记录失败', e);
                    localStorage.removeItem(this.storageKey); // 清除损坏的记录
                }
            }
        },
        // 保存当前聊天记录到 localStorage
        saveHistory() {
            // 过滤掉正在加载的状态（可选，避免保存不完整的内容）
            const saveData = this.contentArr.map(item => ({
                ...item,
                isStreaming: false // 保存时标记为已完成，避免回来后还显示加载中
            }));
            localStorage.setItem(this.storageKey, JSON.stringify(saveData));
        },

        // 删掉：复制内容的方法（没用了）

        // 重试上一条
        retry(index) {
            const item = this.contentArr[index];
            this.prompt = item.inputtext;
            this.contentArr.splice(index); // 移除当前及之后的消息
            this.send();
        },

        // 发送消息
        async send() {
            const input = this.prompt.trim();
            if (!input) return;

            this.isSend = true;
            const newItem = {
                inputtext: input,
                restext: "",
                isStreaming: true
            };
            this.contentArr.push(newItem);
            this.prompt = "";

            // 发送请求的逻辑...
            try {
                this.abortController = customStream(
                    Cookies.get("token"),
                    input,
                    (data) => {
                        newItem.restext += data;
                        // 实时保存（可选，避免中途刷新丢失）
                        this.saveHistory();
                    },
                    () => {
                        newItem.isStreaming = false;
                        this.isSend = false;
                        this.saveHistory(); // 结束后保存
                    },
                    (error) => {
                        newItem.restext = `❌ 错误：${error.message}`;
                        newItem.isStreaming = false;
                        this.isSend = false;
                        this.saveHistory(); // 错误时保存
                    }
                );
            } catch (error) {
                console.error("发送失败:", error);
                this.isSend = false;
            }
        },

        // 新增：清除历史记录（可选，提供手动清除功能）
        clearHistory() {
            if (confirm('确定要清除所有聊天记录吗？')) {
                this.contentArr = [];
                localStorage.removeItem(this.storageKey);
                this.$message.success('聊天记录已清除');
            }
        }
    },
    beforeDestroy() {
        if (this.abortController) this.abortController.abort();

        // 页面销毁前强制保存一次
        this.saveHistory();
    }
};
</script>

<style scoped lang="scss">
// 添加上部样式
.ruoyi-chat-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.ruoyi-chat-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

/* 系统消息 */
.ruoyi-system-message {
    text-align: center;
    margin-bottom: 24px;
    color: #606266;
    font-size: 14px;
}

/* 消息组（用户+AI成对） */
.ruoyi-message-group {
    margin-bottom: 24px;
}

/* 用户消息（右对齐，若依主色） */
.ruoyi-user-message {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    // 添加一点下边距，与AI消息区分开
    margin-bottom: 8px;
}

.ruoyi-user-content {
    background: #409EFF;
    color: #fff;
    padding: 12px 18px;
    border-radius: 18px 18px 4px 18px;
    max-width: 65%;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    // 关键：防止内容被压缩
    flex-shrink: 0;
}


/* AI消息（左对齐，浅灰风格） */
.ruoyi-ai-message {
    display: flex;
    align-items: flex-start;
}

.ruoyi-ai-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #606266;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.ruoyi-ai-content {
    flex: 1;
    background: #F5F7FA;
    padding: 12px 18px;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #EBEEF5;
    max-width: 65%;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    // 关键：防止内容被压缩
    flex-shrink: 0;
}

// AI操作按钮样式（只剩重试按钮了，间距可以调一下）
.ruoyi-ai-actions {
    // 改为垂直排列
    display: flex;
    flex-direction: column;
    // 与消息内容保持水平距离
    margin-left: 8px;
    // 按钮之间添加垂直间距（只有一个按钮，其实可以删掉gap）
    gap: 8px;
    // 让按钮组在垂直方向上也对齐到顶部
    align-items: center;
}

/* 操作按钮通用样式（删掉copy相关，只留retry） */
.ruoyi-retry-btn {
    cursor: pointer;
    color: #909399;
    transition: color 0.2s;
    // 为按钮增加点击区域
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
        color: #F56C6C;
    }
}

/* 输入区域（适配若依按钮风格） */
.ruoyi-input-area {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    align-items: flex-end; // 让按钮和输入框底部对齐
}

.ruoyi-input-area textarea {
    flex: 1;
    height: 90px;
    padding: 12px;
    border: 1px solid #DCDFE6;
    border-radius: 8px;
    resize: none;
    transition: border-color 0.2s;

    &:focus {
        border-color: #409EFF;
        outline: none;
    }
}



/* 加载动画 */
.ruoyi-loading-dot {
    animation: ruoyi-blink 1.4s infinite;
    margin: 0 2px;
}

.ruoyi-loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.ruoyi-loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ruoyi-blink {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}
</style>